Building a practical Firebase-powered application means creating a real Flutter application that uses Firebase services for authentication, cloud data storage, file storage, and other backend features. Firebase allows Flutter applications to communicate with cloud services without requiring developers to build and maintain a traditional backend server.
In this practical project, we will build a simple Task Management Application where users can register, log in, create tasks, update tasks, delete tasks, and view their tasks from Cloud Firestore. Firebase Authentication will manage users, while Cloud Firestore will store task data.
After completing this topic, you will understand how to:
A Firebase-powered Flutter application is a Flutter app that uses one or more Firebase services as its backend.
For example, a task application can use:
| Firebase Service | Purpose |
|---|---|
| Firebase Authentication | Register and authenticate users |
| Cloud Firestore | Store and retrieve task data |
| Firebase Storage | Store images and files |
| Firebase Cloud Messaging | Send push notifications |
| Firebase Analytics | Understand application usage |
| Crashlytics | Monitor application crashes |
| Remote Config | Change selected application settings remotely |
Firebase provides Flutter plugins for many of these services, allowing Flutter applications to interact with Firebase through Dart code. :contentReference[oaicite:0]{index=0}
We will build a practical application called Task Manager.
User
↓
Flutter UI
↓
Firebase Authentication
↓
Authenticated User
↓
Cloud Firestore
↓
User's TasksBefore starting the project, make sure you have:
Firebase's Flutter setup requires Flutter and platform-specific development tools appropriate for the platforms you intend to support. :contentReference[oaicite:1]{index=1}
Create a new Flutter application from the terminal:
flutter create task_managerMove into the project directory:
cd task_managerRun the application:
flutter runVerify the application starts successfully before adding Firebase.
The Firebase CLI provides command-line tools for working with Firebase projects.
After installing the Firebase CLI, log in:
firebase loginYou can verify available Firebase projects with:
firebase projects:listFlutterFire CLI helps configure Firebase for Flutter applications.
dart pub global activate flutterfire_cliFrom the root directory of the Flutter project, run:
flutterfire configureThe configuration process allows you to select or create a Firebase project, choose supported platforms, and generates the firebase_options.dart configuration file. :contentReference[oaicite:2]{index=2}
Firebase projects act as containers for applications and the Firebase resources and services used by those applications. :contentReference[oaicite:3]{index=3}
Run the following command from the Flutter project root:
flutterfire configureAfter configuration, a file similar to the following will be created:
lib/
├── main.dart
└── firebase_options.dartThe generated configuration contains platform-specific Firebase identifiers. These identifiers are not intended to be treated as secret credentials. :contentReference[oaicite:4]{index=4}
Install the Firebase Core Flutter plugin:
flutter pub add firebase_coreFirebase Core provides the foundation for initializing Firebase in the Flutter application.
Update main.dart:
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Task Manager'),
),
body: const Center(
child: Text('Firebase Connected'),
),
),
);
}
}
Firebase's current Flutter setup uses Firebase.initializeApp() with DefaultFirebaseOptions.currentPlatform generated by FlutterFire. :contentReference[oaicite:5]{index=5}
Add Firebase Authentication:
flutter pub add firebase_authThen enable the authentication provider you want to use from the Firebase Console. For this practical project, we will use Email/Password authentication.
Firebase Authentication can be used to create accounts, sign users in, maintain authentication state, and sign users out. :contentReference[oaicite:6]{index=6}
Create:
lib/services/auth_service.dartExample:
import 'package:firebase_auth/firebase_auth.dart';
class AuthService {
final FirebaseAuth _auth = FirebaseAuth.instance;
Future register(
String email,
String password,
) {
return _auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
}
Future login(
String email,
String password,
) {
return _auth.signInWithEmailAndPassword(
email: email,
password: password,
);
}
Future logout() {
return _auth.signOut();
}
User? get currentUser => _auth.currentUser;
}
A registration form collects an email address and password and sends them to Firebase Authentication.
Future registerUser() async {
try {
await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: emailController.text.trim(),
password: passwordController.text.trim(),
);
print('Registration successful');
} on FirebaseAuthException catch (e) {
print('Registration failed: ${e.message}');
}
}
Registration Form
↓
Validate Input
↓
Firebase Authentication
↓
Create User
↓
Open Home ScreenFuture loginUser() async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: emailController.text.trim(),
password: passwordController.text.trim(),
);
print('Login successful');
} on FirebaseAuthException catch (e) {
print('Login failed: ${e.message}');
}
}
Future logout() async {
await FirebaseAuth.instance.signOut();
}After logout, the application should redirect the user to the login screen.
Install Cloud Firestore:
flutter pub add cloud_firestoreFirestore is a cloud database that stores application data using collections and documents. Firebase's Flutter documentation demonstrates using Authentication together with Firestore to build data-driven applications. :contentReference[oaicite:7]{index=7}
For our Task Manager application, we can use the following structure:
users
└── userId
├── email
└── name
tasks
└── taskId
├── title
├── description
├── completed
├── userId
└── createdAt
The userId field connects each task to the user who created it.
Future addTask({
required String title,
required String description,
}) async {
final user = FirebaseAuth.instance.currentUser;
if (user == null) {
throw Exception('User is not logged in');
}
await FirebaseFirestore.instance.collection('tasks').add({
'title': title,
'description': description,
'completed': false,
'userId': user.uid,
'createdAt': FieldValue.serverTimestamp(),
});
}
Here, collection('tasks').add() creates a new document with an automatically generated document ID.
Tasks belonging to the current user can be retrieved with a query:
final user = FirebaseAuth.instance.currentUser;
final snapshot = await FirebaseFirestore.instance
.collection('tasks')
.where('userId', isEqualTo: user!.uid)
.get();
for (final document in snapshot.docs) {
print(document.data());
}
For a task list that updates when Firestore data changes, use snapshots():
StreamBuilder(
stream: FirebaseFirestore.instance
.collection('tasks')
.where(
'userId',
isEqualTo: FirebaseAuth.instance.currentUser!.uid,
)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return const Center(
child: Text('Something went wrong'),
);
}
if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
return const Center(
child: Text('No tasks available'),
);
}
final tasks = snapshot.data!.docs;
return ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
final task = tasks[index].data() as Map;
return ListTile(
title: Text(task['title'] ?? ''),
subtitle: Text(task['description'] ?? ''),
);
},
);
},
)
Suppose the user marks a task as completed:
Future updateTask(
String taskId,
bool completed,
) async {
await FirebaseFirestore.instance
.collection('tasks')
.doc(taskId)
.update({
'completed': completed,
});
}Future deleteTask(String taskId) async {
await FirebaseFirestore.instance
.collection('tasks')
.doc(taskId)
.delete();
}Instead of writing Firestore code directly inside widgets, create a separate service:
lib/services/task_service.dartimport 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
class TaskService {
final FirebaseFirestore _firestore =
FirebaseFirestore.instance;
final FirebaseAuth _auth =
FirebaseAuth.instance;
CollectionReference get _tasks =>
_firestore.collection('tasks');
String get _userId =>
_auth.currentUser!.uid;
Future addTask(
String title,
String description,
) async {
await _tasks.add({
'title': title,
'description': description,
'completed': false,
'userId': _userId,
'createdAt': FieldValue.serverTimestamp(),
});
}
Stream getTasks() {
return _tasks
.where('userId', isEqualTo: _userId)
.snapshots();
}
Future updateTask(
String id,
Map data,
) async {
await _tasks.doc(id).update(data);
}
Future deleteTask(String id) async {
await _tasks.doc(id).delete();
}
}
lib/
├── main.dart
├── firebase_options.dart
├── models/
│ └── task.dart
├── services/
│ ├── auth_service.dart
│ └── task_service.dart
├── screens/
│ ├── login_screen.dart
│ ├── register_screen.dart
│ ├── home_screen.dart
│ └── add_task_screen.dart
└── widgets/
├── task_card.dart
└── custom_text_field.dartSeparating screens, services, models, and reusable widgets makes the application easier to understand and maintain.
class Task {
final String id;
final String title;
final String description;
final bool completed;
final String userId;
Task({
required this.id,
required this.title,
required this.description,
required this.completed,
required this.userId,
});
factory Task.fromFirestore(
String id,
Map data,
) {
return Task(
id: id,
title: data['title'] ?? '',
description: data['description'] ?? '',
completed: data['completed'] ?? false,
userId: data['userId'] ?? '',
);
}
}
The home screen can display all tasks belonging to the logged-in user.
class HomeScreen extends StatelessWidget {
HomeScreen({super.key});
final TaskService taskService = TaskService();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Tasks'),
),
body: StreamBuilder(
stream: taskService.getTasks(),
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return const Center(
child: Text('Unable to load tasks'),
);
}
if (!snapshot.hasData ||
snapshot.data!.docs.isEmpty) {
return const Center(
child: Text('No tasks found'),
);
}
return ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
final document =
snapshot.data!.docs[index];
final data =
document.data() as Map;
return ListTile(
title: Text(data['title'] ?? ''),
subtitle:
Text(data['description'] ?? ''),
);
},
);
},
),
);
}
}
A simple task form can contain:
final titleController = TextEditingController();
final descriptionController = TextEditingController();
Future saveTask() async {
final title = titleController.text.trim();
final description =
descriptionController.text.trim();
if (title.isEmpty) {
return;
}
await TaskService().addTask(
title,
description,
);
}
Firebase operations are asynchronous, so the UI should show a loading indicator while an operation is running.
bool isLoading = false;
Future save() async {
setState(() {
isLoading = true;
});
try {
await TaskService().addTask(
titleController.text.trim(),
descriptionController.text.trim(),
);
} finally {
if (mounted) {
setState(() {
isLoading = false;
});
}
}
}
Firebase operations can fail because of invalid credentials, network problems, permission rules, unavailable services, or invalid data.
try {
await TaskService().addTask(
titleController.text.trim(),
descriptionController.text.trim(),
);
} catch (e) {
if (!context.mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error: $e'),
),
);
}
An empty state should be displayed when the user has not created any tasks.
if (tasks.isEmpty) {
return const Center(
child: Text(
'No tasks yet. Create your first task!',
),
);
}After successfully creating a task, provide feedback to the user:
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Task created successfully'),
),
);Security Rules are an important part of a Firebase-powered application. The application should not rely only on the Flutter UI to protect user data.
A basic Firestore rule can restrict a user's access to documents whose userId matches the authenticated user's UID.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /tasks/{taskId} {
allow read, create, update, delete:
if request.auth != null
&& request.auth.uid == resource.data.userId;
}
}
}
When creating documents, rules may need separate handling for create because the document does not yet exist as a stored resource. Always design and test rules according to the application's actual data model and authorization requirements.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /tasks/{taskId} {
allow create:
if request.auth != null
&& request.resource.data.userId == request.auth.uid;
allow read, update, delete:
if request.auth != null
&& resource.data.userId == request.auth.uid;
}
}
}
This approach ensures that a user can create a task only for their own account and can access only their own existing tasks.
If the application needs profile pictures, task attachments, documents, or other files, Firebase Storage can be added.
flutter pub add firebase_storageExample upload:
final storageRef = FirebaseStorage.instance
.ref()
.child('task_files')
.child(fileName);
await storageRef.putFile(file);
final downloadUrl =
await storageRef.getDownloadURL();
print(downloadUrl);
A common architecture is to store the actual file in Firebase Storage and save its download URL in Firestore.
await FirebaseFirestore.instance
.collection('tasks')
.doc(taskId)
.update({
'attachmentUrl': downloadUrl,
});This separates file storage from structured application data.
Notifications can be added with Firebase Cloud Messaging:
flutter pub add firebase_messagingCloud Messaging can be used for notifications such as:
Analytics can help measure application usage.
flutter pub add firebase_analyticsExample:
final analytics = FirebaseAnalytics.instance;
await analytics.logEvent(
name: 'task_created',
parameters: {
'source': 'task_form',
},
);
For production applications, Crashlytics can be used to monitor application crashes and errors.
flutter pub add firebase_crashlyticsExample:
FirebaseCrashlytics.instance.recordError(
error,
stackTrace,
);A practical Firebase application often connects authentication data with application data.
Firebase Authentication
|
| user.uid
↓
Cloud Firestore
|
↓
User-specific dataFor example, if a user has UID abc123, tasks can contain:
{
"title": "Learn Flutter",
"description": "Practice Firebase integration",
"completed": false,
"userId": "abc123"
}App Starts
↓
Initialize Firebase
↓
Check Authentication State
↓
User Logged In?
├── No → Login/Register Screen
|
└── Yes
↓
Home Screen
↓
Load User Tasks
↓
Firestore
↓
Display Tasks
↓
Create / Update / Delete
↓
Firestore
↓
UI UpdatesThe application can listen for authentication changes:
StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasData) {
return HomeScreen();
}
return LoginScreen();
},
)
This allows the application to automatically switch between authenticated and unauthenticated screens.
main.dart
|
↓
AuthGate
|
├── User not logged in
| ↓
| LoginScreen
| ↓
| RegisterScreen
|
└── User logged in
↓
HomeScreen
↓
TaskService
↓
Cloud Firestoreimport 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
import 'screens/home_screen.dart';
import 'screens/login_screen.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const TaskManagerApp());
}
class TaskManagerApp extends StatelessWidget {
const TaskManagerApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Task Manager',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
useMaterial3: true,
),
home: const AuthGate(),
);
}
}
class AuthGate extends StatelessWidget {
const AuthGate({super.key});
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
if (snapshot.hasData) {
return HomeScreen();
}
return const LoginScreen();
},
);
}
}
A practical Firebase development workflow can follow these steps:
flutterfire configure.firebase_core.Firebase recommends keeping development environments separated when appropriate, such as using distinct Firebase projects for development, staging, and production. :contentReference[oaicite:8]{index=8}
Test every major feature:
| Feature | Test |
|---|---|
| Registration | Create a new account |
| Login | Log in with valid credentials |
| Invalid Login | Display an appropriate error |
| Logout | Return to login screen |
| Create Task | Task appears in Firestore and UI |
| Read Tasks | Only appropriate tasks are displayed |
| Update Task | Completion status changes |
| Delete Task | Task disappears from the list |
| Empty State | Message appears when there are no tasks |
| Network Error | Error state is displayed |
| Security | Users cannot access another user's data |
flutterfire configure.Run flutterfire configure again when your Firebase configuration needs to be updated, such as when adding a new supported platform or certain Firebase products/configuration. Firebase specifically recommends rerunning it when starting support for a new platform or using certain additional Firebase products. :contentReference[oaicite:9]{index=9}
flutterfire configuretask_manager/
├── android/
├── ios/
├── web/
├── lib/
│ ├── main.dart
│ ├── firebase_options.dart
│ ├── models/
│ │ └── task.dart
│ ├── services/
│ │ ├── auth_service.dart
│ │ └── task_service.dart
│ ├── screens/
│ │ ├── login_screen.dart
│ │ ├── register_screen.dart
│ │ ├── home_screen.dart
│ │ └── add_task_screen.dart
│ └── widgets/
│ └── task_card.dart
├── test/
├── pubspec.yaml
└── README.mdBuild your own Firebase Task Manager using the concepts from this lesson.
User Registration
↓
Firebase Authentication
↓
Create User Profile
↓
Firestore
↓
Home Dashboard
↓
Create Task
↓
Firestore
↓
Optional File Upload
↓
Firebase Storage
↓
Save File URL
↓
Firestore
↓
Task Display
↓
Update / Delete
↓
Analytics / Notifications| Command | Purpose |
|---|---|
flutter create task_manager |
Create Flutter project |
flutter run |
Run application |
firebase login |
Log into Firebase CLI |
firebase projects:list |
List Firebase projects |
dart pub global activate flutterfire_cli |
Install FlutterFire CLI |
flutterfire configure |
Configure Firebase for Flutter |
flutter pub add firebase_core |
Add Firebase Core |
flutter pub add firebase_auth |
Add Authentication |
flutter pub add cloud_firestore |
Add Firestore |
flutter pub add firebase_storage |
Add Storage |
flutter pub add firebase_messaging |
Add Cloud Messaging |
flutter pub add firebase_analytics |
Add Analytics |
flutter pub add firebase_crashlytics |
Add Crashlytics |
Firebase is a backend platform that provides services such as Authentication, Firestore, Storage, Messaging, Analytics, and other application-development capabilities.
Use Firebase CLI and FlutterFire CLI, configure the Firebase project with flutterfire configure, add the required FlutterFire plugins, and initialize Firebase using Firebase.initializeApp().
Firebase Authentication provides user authentication functionality such as account creation, login, logout, and authentication-state management.
Cloud Firestore is a cloud NoSQL database that stores data in collections and documents.
A service class separates Firebase operations from the UI layer and makes the application easier to maintain and test.
Security Rules control access to Firebase resources and help prevent unauthorized users from accessing or modifying application data.
It is the configuration file generated by FlutterFire CLI containing Firebase configuration information for the selected platforms.
It initializes Firebase before Firebase services are used by the application.
firebase_core initializes Firebase.firebase_auth handles authentication.cloud_firestore provides Firestore database access.firebase_storage handles file storage.firebase_messaging supports push messaging.firebase_analytics provides analytics integration.firebase_crashlytics supports crash reporting.flutterfire configure configures Firebase for Flutter.firebase_options.dart stores generated platform configuration.After completing this practical exercise, you should be able to build a Flutter application that connects to Firebase, authenticates users, stores application data in Cloud Firestore, performs CRUD operations, handles asynchronous states, structures Firebase code into services, and protects user-specific data with Security Rules.
Firebase's official Flutter learning materials include practical examples combining Flutter with Firebase Authentication and Cloud Firestore, making this type of project a useful hands-on exercise for learning full-stack Flutter development. :contentReference[oaicite:10]{index=10}
For structured Flutter training and practical learning, explore the following resources:
Building a practical Firebase-powered Flutter application involves combining Flutter's UI capabilities with Firebase's backend services. A complete application can use Firebase Authentication for user accounts, Cloud Firestore for structured application data, Firebase Storage for files, Cloud Messaging for notifications, Analytics for usage information, and Crashlytics for crash monitoring.
The key development process is to create the Flutter project, configure Firebase with FlutterFire CLI, initialize Firebase, add the required Firebase plugins, implement authentication, create Firestore CRUD operations, manage application states, apply Security Rules, and test the complete application workflow.
